<template>
    <div class="ordersList_container">
        <el-row type="flex" align="middle">
            <el-col :span="1" :offset="10">
                <i class="el-icon-tickets"></i>
            </el-col>
            <el-col :span="3">
                <h1>订单列表</h1>
            </el-col>
            <el-col :span=4 :offset="5">
                <el-input
                    size="small"
                    placeholder="输入查询订单名称"
                    v-model="searchInput"
                    maxlength=10
                    :clearable="true"
                    @clear="getOrdersList"
                    @keyup.native.enter="getOrdersList"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="getOrdersList"
                        size="mini"
                    >
                    </el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span=22 :offset="1">
                <el-table
                    :data="ordersList"
                    :border="true"
                    :stripe="true"
                    align="center"
                    class="ordersListTable"
                    height="42vh"
                >
                    <el-table-column
                        label="序号"
                        type="index"
                        width="55"
                    >
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableinfo"
                        :key="item.index"
                        :prop="item.ordersInfoItem"
                        :label="item.ordersInfoTD"
                        :min-width="item.ordersTDWith"
                        sortable
                    >
                    </el-table-column>
                    <el-table-column
                        :label="' \0 是否付款'"
                        min-width="75"
                        sortable
                    >
                        <template v-slot='payStatus'>
                            <el-tag :type="payStatus.row.pay_status==1 ? 'success':'danger'">
                                {{payStatus.row.pay_status | trunStatus}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="下单时间"
                        min-width="160"
                        sortable
                    >
                        <template v-slot='showDate'>
                            {{showDate.row.create_time | getYMDHMS}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        min-width="80"
                    >
                    <template v-slot='idData'>
                        <el-button-group>
                            <el-tooltip content="修改地址" placement="top-end">
                                <el-button
                                    type="primary"
                                    icon="el-icon-location-outline"
                                    size="mini"
                                    @click="dialogAddresVisible=true"
                                >
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="物流状态" placement="top-start">
                                    <el-button
                                    type="warning"
                                    icon="el-icon-position"
                                    size="mini"
                                    @click="openDialogTransportVisible(idData.row.is_send)"
                                >
                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22" :offset="1" style="margin-bottom: 15px">
                <hr/>
            </el-col>
        </el-row>
        <el-row >
            <el-col>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :hide-on-single-page="showPagination"
                    :current-page="nowpage"
                    :page-sizes="[5,7,10,15]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="ordersnum">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog 
            title="修改订单地址"
            :visible.sync="dialogAddresVisible"
            width="32%"
            center
            @close="resetCloseAddresDialog(true)"
        >
            <el-form
                :model="addresInfoForm"
                :rules="addresInfoFormRules"
                ref="addresInfoFormRef"
                status-icon 
                label-position="top"
            >
                <el-form-item label="省市区/县" prop="briefAddres">
                    <el-cascader
                        :options="cityData"
                        :props="{ expandTrigger: 'hover' }"
                        v-model="addresInfoForm.briefAddres"
                        clearable
                        style="width:100%"
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="detailAddres">
                    <el-input
                        v-model="addresInfoForm.detailAddres"
                        placeholder="请输入详细地址"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item class="newFormButton">
                    <el-button type="primary" size="small" @click="pushAddresInfoForm">提 交</el-button>
                    <el-button type="info" size="small" @click="resetCloseAddresDialog(false)">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog 
            title="订单物流状态信息"
            :visible.sync="dialogTransportVisible"
            width="40%"
            center
            @close="transportInfo=[]"
        >
            <el-timeline :reverse="false" v-if="transportInfo.length!=0">
                <el-timeline-item
                    v-for="activity in transportInfo.slice(0,1)"
                    :key="activity.ftime"
                    :timestamp="activity.time"
                    size="large"
                    icon="el-icon-check"
                    color="#0bbd87"
                >
                    {{activity.context}}
                </el-timeline-item>
                <el-timeline-item
                    v-for="activity in transportInfo.slice(1,transportInfo.length)"
                    :key="activity.ftime"
                    :timestamp="activity.time"
                    size="large"
                    icon="el-icon-truck"
                >
                    {{activity.context}}
                </el-timeline-item>
            </el-timeline>
            <el-empty description="暂无物流状态信息" v-else></el-empty>
        </el-dialog>
    </div>
</template>


<script>
import cityData from "@/assets/js/citydata.js"
export default({
    name:'orderslist',
    data(){
        return {
            searchInput:'',
            nowpage: 1,
            pagesize: 5,
            ordersList: [],
            ordersnum: 0,
            tableinfo : [
                {
                    ordersInfoItem: 'order_number',
                    ordersInfoTD: ' \0 订单编号',
                    ordersTDWith: '150'
                },
                {
                    ordersInfoItem: 'order_price',
                    ordersInfoTD: ' \0 订单价格',
                    ordersTDWith: '75'
                },
                {
                    ordersInfoItem: 'is_send',
                    ordersInfoTD: ' \0 是否发货',
                    ordersTDWith: '75'
                },
                {
                    ordersInfoItem: 'order_fapiao_title',
                    ordersInfoTD: ' \0 发票抬头',
                    ordersTDWith: '75'
                }
            ],
            showPagination: true,
            dialogAddresVisible: false,
            cityData,
            addresInfoForm:{
                briefAddres:[],
                detailAddres:''
            },
            addresInfoFormRules:{
                briefAddres:[
                    {
                        required: true,
                        message: '省市区/县不能为空！',
                        trigger: 'blur'
                    }
                ],
                detailAddres:[
                    {
                        required: true,
                        message: '详细地址不能为空！',
                        trigger: 'blur'
                    }
                ]
            },
            dialogTransportVisible:false,
            transportInfo:[],
        }
    },
    created(){
        this.getOrdersList();
        this.checkPagination();
    },
    methods: {
        async getOrdersList(){
            const { data: res } = await this.$http.get('orders',{
                params:{
                    query: this.searchInput,
                    pagenum: this.nowpage,
                    pagesize: this.pagesize,
                }
            });
            if(res.meta.status == 200){
                this.ordersList = res.data.goods;
                this.ordersnum = res.data.total;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取商品列表失败！'
                    }
                )
            }
        },
        checkPagination(){
            if(this.ordersnum>=this.pagesize){
                this.showPagination =false;
            }else{
                this.showPagination =true;
            }
        },
        handleSizeChange(value){
            this.pagesize = value;
            this.getOrdersList();
            this.checkPagination();
        },
        handleCurrentChange(value){
            this.nowpage = value;
            this.getOrdersList();
            this.checkPagination();
        },
        resetCloseAddresDialog(flag){
            this.$refs.addresInfoFormRef.resetFields();
            if(flag){
                this.dialogAddresVisible = false;
            }else{
                this.dialogAddresVisible = true;
            }
        },
        pushAddresInfoForm(){
            this.$refs.addresInfoFormRef.validate(valid=>{
                if(valid){
                    //模拟修改是否成功
                    let successOrFail = Math.round(Math.random());
                    if(successOrFail==1){
                        this.resetCloseAddresDialog(true)
                        this.getOrdersList();
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '修改订单地址成功！'
                            }
                        )
                    }else if(successOrFail==0){
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'error',
                                duration:2000,
                                message: '修改订单地址失败！'
                            }
                        )
                    };
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '请填写完整的订单地址！'
                        }
                    )
                }
            })
        },
        // async
        openDialogTransportVisible(value){
            // const { data: res } = await this.$http.get('/kuaidi/:id');
            // 模拟获取信息是否成功
            let successOrFail = Math.round(Math.random());
            if(successOrFail==1){
                // 根据订单是否发货字段is_send模拟是否存在物流数据
                let data
                if(value=='是'){
                    // 订单号失效,模拟返回数据
                    data = [
                        {
                        time: '2018-05-10 09:39:00',
                        ftime: '2018-05-10 09:39:00',
                        context: '已签收,感谢使用顺丰,期待再次为您服务',
                        location: ''
                        },
                        {
                        time: '2018-05-10 08:23:00',
                        ftime: '2018-05-10 08:23:00',
                        context: '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
                        location: ''
                        },
                        {
                        time: '2018-05-10 07:32:00',
                        ftime: '2018-05-10 07:32:00',
                        context: '快件到达 [北京海淀育新小区营业点]',
                        location: ''
                        },
                        {
                        time: '2018-05-10 02:03:00',
                        ftime: '2018-05-10 02:03:00',
                        context: '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
                        location: ''
                        },
                        {
                        time: '2018-05-09 23:05:00',
                        ftime: '2018-05-09 23:05:00',
                        context: '快件到达 [北京顺义集散中心]',
                        location: ''
                        },
                        {
                        time: '2018-05-09 21:21:00',
                        ftime: '2018-05-09 21:21:00',
                        context: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
                        location: ''
                        },
                        {
                        time: '2018-05-09 13:07:00',
                        ftime: '2018-05-09 13:07:00',
                        context: '顺丰速运 已收取快件',
                        location: ''
                        },
                        {
                        time: '2018-05-09 12:25:03',
                        ftime: '2018-05-09 12:25:03',
                        context: '卖家发货',
                        location: ''
                        },
                        {
                        time: '2018-05-09 12:22:24',
                        ftime: '2018-05-09 12:22:24',
                        context: '您的订单将由HLA（北京海淀区清河中街店）门店安排发货。',
                        location: ''
                        },
                        {
                        time: '2018-05-08 21:36:04',
                        ftime: '2018-05-08 21:36:04',
                        context: '商品已经下单',
                        location: ''
                        }
                    ]                    
                }else if(value=='否'){
                    data = []
                }
                this.transportInfo = data;
            }else if(successOrFail==0){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取订单物流状态信息失败！'
                    }
                )
            };


            this.dialogTransportVisible = true;
        }
    },
    filters:{
        trunStatus(flag){
            if(flag==1){
                return '已付款'
            }else if(flag==0){
                return '未付款'
            }
        },
        //时间戳转精确到毫秒时间
        getYMDHMS (timestamp) {
            if(timestamp.toString().length==10){
                var time = new Date(timestamp*1000)
            }else{
                var time = new Date(timestamp)
            }
            let year = time.getFullYear()
            let month = (time.getMonth() + 1).toString().padStart(2, '0')
            let date = (time.getDate()).toString().padStart(2, '0')
            let hours = (time.getHours()).toString().padStart(2, '0')
            let minute = (time.getMinutes()).toString().padStart(2, '0')
            let second = (time.getSeconds()).toString().padStart(2, '0')
            return year + '年' + month + '月' + date + '日 ' + hours + '时' + minute + '分' + second + '秒'
        }
    }
})
</script>

<style lang="less" scoped>
    .ordersList_container{
        width: 80vw;
        text-align: center;
        background-color: #fff;
        padding: 30px 8px;
        margin:4vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        hr{
            background-color: #2495e7;
            height: 1px;
        }
        .ordersListTable{
            width: 100%;
            margin: 20px 0 20px 0;
        }
        .newFormButton{
            text-align: right;
            margin:0;
        }
    }
</style>